<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="province">
        <option value="">请选择</option>
        <option value="0">江西</option>
        <option value="1">湖南</option>
        <option value="2">广东</option>
        <option value="3">广西</option>
    </select>
    <select id="city">
        <option value="">请选择</option>
    </select>
    <script>
        /* 省市级联动
            1. 点击省份的时候,选省份的事件 onchange
            2. 准备数据 所有的省对应的城市 
                []
        */
        // 获取所有的省
        var p = document.querySelector("#province")
        // 获取所有的城市
        var c = document.querySelector("#city")
        //准备数据
        var arr = [
            ["南昌", "九江", "萍乡", "赣州"],//
            ["长沙", "株洲", "湘潭", "岳阳"],//
            ["广州", "深圳", "东莞", "佛山"],//
            ["南宁", "桂林", "柳州", "百色"]//
        ]
        /* change事件 */
        p.onchange = function () {
            /* 
                城市的累加
                    解决BUG => 每选择一个省之前,先将城市里面的城市给清空一份
            */
           c.innerHTML = "<option value=''>请选择</option>"
            // console.log(this.value);
            var index = this.value;//获取到省当中对应的下标
            //根据省的下标获对应的城市,获取到这个城市,将城市渲染到city这个下拉框里面去
            // console.log(arr[index]);|
            var cityArr = arr[index]
            /* 
                遍历这个arr[index]这个数组 => 江西 
                使用DOM创建option元素
                    var option = document.createElement("option")
                    option.innerHTML = cityArr[i"]
                        => <option>南昌</option>
                    将Option追加到city的下拉框里面去
                           c.appendChild(option)
            */
           cityArr.forEach(function(item,i){
               //创建option这个标签
               var option = document.createElement("option")
               //将城市添加一个名字
               option.innerHTML = item
               //追加到c里面去
               c.appendChild(option);
           })
        }
    </script>
</body>

</html>